<script setup>
import {toRef, reactive, onMounted, defineProps, watch, ref, computed } from 'vue';
import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex'
import hljs from 'highlight.js';
 
const mdi = new MarkdownIt({
  linkify: true,
  highlight(code, language) {
    const validLang = !!(language && hljs.getLanguage(language))
    if (validLang) {
      const lang = language ?? ''
      return highlightBlock(hljs.highlight(lang, code, true).value, lang)
    }
    return highlightBlock(hljs.highlightAuto(code).value, '')
  }
})
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
 
function highlightBlock(str, lang) {
  return `<pre class="pre-code-box"><div class="biao pre-code-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><div class="pre-code"><code class="hljs code-block-body ${lang}">${str}</code></div></pre>`
}
 
const getMdiText = (value) => {
    return mdi.render(value)
}
function getLastTextNode(dom){
  const childNodes = dom.childNodes
  if (childNodes.length === 0){
    return null
  }
  for (let i = childNodes.length - 1; i >= 0; i--) {
    const node = childNodes[i]
    if (node.nodeType === Node.TEXT_NODE&&/\S/.test(node.nodeValue)) {
      node.nodeValue = node.nodeValue.replace(/\s+/g, ' ')
      return node
    }else if(node.nodeType === Node.ELEMENT_NODE){
      const last = getLastTextNode(node)
      if (last){
        return last
      }
    }
  }
  return null
}
const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
const state = reactive({
    htmlStr: '' 
})
let pos = reactive({
  x: 40,
  y: 10
})
// onMounted(() => {
//     let s = "##1.\n你好！！！！！\n```python\nimport re\na=100\nb=1000\n```\n1111\n```java\nint a=100\n```\n1111"
//     let k = ""
//     let i = 0
//     let y = setInterval(()=>{
//         if (i>=s.length - 1){
//           let doms = document.querySelector(".aaaaa")
//           doms.remove()
//           clearInterval(y)
//         }
//         k += s[i]
//         i++
//         state.htmlStr = getMdiText(k) //htmlStr就是已经包含html样式的文本
//         let dome = document.querySelector(".mains");
//         if (dome){
//           const lastText = getLastTextNode(dome)
//           console.log(lastText);
//           const textNode = document.createTextNode('\u200b')
//           if(lastText){
//             lastText.parentElement.appendChild(textNode)
//           }else{
//             dome.appendChild(textNode)
//           }
//           const domRect = dome.getBoundingClientRect()
//           const rang = document.createRange()
//           rang.setStart(textNode, 0)
//           rang.setEnd(textNode, 0)
//           const rect = rang.getBoundingClientRect()
//           pos.x = (rect.left - domRect.left) + 10
//           pos.y = (rect.top - domRect.top) - 2
//           console.log(domRect.left);
//           textNode.remove()
//         }
//     },50)
    
// });
function copy(e){
  
  console.log(e.target.innerText);
  if (e.target.innerText === "复制代码"){
    //实现复制功能
    console.log(e.target.parentElement.parentElement.childNodes[1].innerText);
    let text = e.target.parentElement.parentElement.childNodes[1].innerText
    let input = document.createElement("textarea")
    input.value = text
    document.body.appendChild(input)
    input.select()
    document.execCommand("Copy")
    input.remove()
    e.target.innerText = "✔ copied！"
    setTimeout(()=>{
      e.target.innerText = "复制代码"
    },500)

  }
}
watch(()=>props.msg, (newValue, oldValue) => { //直接监听
    console.log("变化了：");
    if (newValue=="huangniubi777"){
        let doms = document.querySelector(".aaaaa")
        doms.remove()
        return 0
    }
    pos.x = 0
    pos.y = 0
	  state.htmlStr = getMdiText(newValue)
    let domed = document.querySelectorAll(".mains");
    let dome = domed[domed.length - 1]
    if (dome){
          const lastText = getLastTextNode(dome)
          console.log(lastText);
          const textNode = document.createTextNode('\u200b')
          if(lastText){
            lastText.parentElement.appendChild(textNode)
          }else{
            dome.appendChild(textNode)
          }
          const domRect = dome.getBoundingClientRect()
          const rang = document.createRange()
          rang.setStart(textNode, 0)
          rang.setEnd(textNode, 0)
          const rect = rang.getBoundingClientRect()
          pos.x = (rect.left - domRect.left)
          pos.y = (rect.top - domRect.top)
          console.log(domRect.left);
          textNode.remove()
    }
});
</script>
<template>
  <div class="ko">
    <div class="mains" @click="copy">
      <div class="img">
        <svg t="1701611586344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16111" width="200" height="200"><path d="M0 0m307.2 0l409.6 0q307.2 0 307.2 307.2l0 409.6q0 307.2-307.2 307.2l-409.6 0q-307.2 0-307.2-307.2l0-409.6q0-307.2 307.2-307.2Z" fill="#000000" p-id="16112"></path><path d="M849.7152 494.4384a180.6848 180.6848 0 0 1-8.704 164.2496 178.5856 178.5856 0 0 1-119.296 86.528 179.5072 179.5072 0 0 1-65.6896 90.624 180.4288 180.4288 0 0 1-106.496 34.5088 182.9376 182.9376 0 0 1-37.7344-3.84 180.736 180.736 0 0 1-68.7616-30.72 177.4592 177.4592 0 0 1-27.9552-25.6 180.7872 180.7872 0 0 1-210.176-121.2416 178.944 178.944 0 0 1 0.256-111.872 181.248 181.248 0 0 1-22.1696-211.712 179.456 179.456 0 0 1 50.2272-56.2176 175.1552 175.1552 0 0 1 69.0176-30.3616 180.224 180.224 0 0 1 172.2368-125.0816 178.0736 178.0736 0 0 1 134.5536 60.0064 182.4256 182.4256 0 0 1 111.36 11.6736 181.248 181.248 0 0 1 83.0976 74.9568 179.8656 179.8656 0 0 1 23.3984 109.568c-1.3312 12.6464-4.096 25.0368-8.0896 37.0688 12.8 14.08 23.1936 30.0544 30.9248 47.4624z m-248.832 318.8224a133.9392 133.9392 0 0 0 72.704-72.704c6.656-16.3328 10.24-33.792 10.24-51.4048v-166.5536a6.9632 6.9632 0 0 1-0.2048-0.512 1.8432 1.8432 0 0 0-0.2048-0.4608 1.3824 1.3824 0 0 0-0.3584-0.3584 1.1776 1.1776 0 0 0-0.512-0.3072l-60.2112-34.816v201.216a23.6544 23.6544 0 0 1-11.776 20.3264L467.9168 790.016c-1.1776 0.7168-3.1744 1.792-4.2496 2.3552 5.888 5.0176 12.288 9.4208 19.0464 13.312 6.8096 3.8912 13.824 7.168 21.1456 9.8304a138.1376 138.1376 0 0 0 45.7216 7.9872c17.6128 0 35.072-3.4816 51.3536-10.24z m-339.8656-113.0496a135.3216 135.3216 0 0 0 81.5616 62.464 134.144 134.144 0 0 0 101.888-13.312l144.2304-83.3024 0.4096-0.3584a0.9216 0.9216 0 0 0 0.2048-0.4608 1.792 1.792 0 0 0 0.2048-0.4608v-70.144L415.3856 695.296a26.4704 26.4704 0 0 1-5.632 2.4064 24.1664 24.1664 0 0 1-17.8176-2.4064l-142.7456-82.432a157.8496 157.8496 0 0 1-4.1472-2.56 134.8608 134.8608 0 0 0 0.0512 46.4384 135.168 135.168 0 0 0 15.872 43.52v-0.1024z m-37.4784-311.4496a135.0656 135.0656 0 0 0-13.3632 101.9392 134.144 134.144 0 0 0 62.464 81.5104l144.2304 83.3536 0.512 0.1024h0.512a0.9216 0.9216 0 0 0 0.512-0.1024 2.048 2.048 0 0 0 0.512-0.256l60.416-34.9184-174.08-100.5568a24.0128 24.0128 0 0 1-10.9056-14.2848 20.3776 20.3776 0 0 1-0.768-6.0416V329.9328a135.9872 135.9872 0 0 0-21.1456 9.8304 137.216 137.216 0 0 0-48.7424 48.9984h-0.1536z m495.36 115.3024a23.7056 23.7056 0 0 1 8.6528 8.6016 26.7264 26.7264 0 0 1 2.304 5.6832 24.064 24.064 0 0 1 0.6656 6.144v169.5744a133.7856 133.7856 0 0 0 60.3648-44.544 134.4512 134.4512 0 0 0-39.5776-197.6832l-144.2304-83.3536a6.7072 6.7072 0 0 0-0.512-0.1536h-0.512a9.1136 9.1136 0 0 1-0.512 0.1536 1.792 1.792 0 0 0-0.512 0.2048l-60.16 34.816 174.1824 100.5568h-0.1536z m60.1088-90.3168h-0.1024v0.0512l0.1024-0.1024z m-0.1024-0.1024a134.2976 134.2976 0 0 0-199.424-139.0592L435.3536 357.888a1.3312 1.3312 0 0 0-0.3584 0.4096l-0.3072 0.4096a7.3728 7.3728 0 0 0-0.2048 1.024v69.632l174.1312-100.5568a26.9312 26.9312 0 0 1 5.6832-2.4064 23.9616 23.9616 0 0 1 17.7664 2.4064l142.7456 82.432 4.1984 2.4576z m-377.344-77.056a24.064 24.064 0 0 1 6.8608-16.5888 21.248 21.248 0 0 1 4.864-3.6864L556.032 233.984c1.3312-0.8192 3.1744-1.8944 4.2496-2.4064a133.8368 133.8368 0 0 0-142.848-18.432 134.2464 134.2464 0 0 0-77.312 121.6512V501.248a7.168 7.168 0 0 0 0.1024 0.512 1.8944 1.8944 0 0 0 0.256 0.512 2.9696 2.9696 0 0 0 0.3584 0.4096 1.7408 1.7408 0 0 0 0.4608 0.3072l60.2624 34.816V336.5888z m32.7168 220.0576l77.568 44.8512 77.6192-44.8512V467.0976l-77.5168-44.8-77.6192 44.8-0.0512 89.6z" fill="#FFFFFF" p-id="16113"></path></svg>    
      </div>
      <div class="aaaaa">█</div>
      <div class="kk" v-html="state.htmlStr"></div>
    </div>
  </div>
</template>
<style  scoped>
.img>svg{
  /* position: absolute; */
  height: 30px;
  width: 30px;
  /* d
   */
}
.kk{
  flex: 1;
  margin-left: 10px;
  max-width: 100%;
  word-break: break-all;
}
.ko{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: rgb(221, 221, 221);
  border-top: 1px solid #b6b6b6;
  border-bottom: 1px solid #b6b6b6;
  min-height: 100px;
}
.mains{
  position: relative;
  color: #000000;
  display: flex;
  max-width: 800px;
  width: 98%;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin: 0 auto; */
}
.aaaaa{
  width: 0;
  position: absolute;
  left: calc(v-bind('pos.x')*1px);
  top: calc(v-bind('pos.y')*1px);
  content: '';
  /* color: rgb(0, 0, 0); */
  animation: blink 0.5s infinite;
  z-index: 9999;
}

/* 让.aaaaa添加一个闪烁动画 */
@keyframes blink{
      0% {
        color: white;
      }
      50% {
        color: black;
      }
      100% {
        color: white;
      }
}
::v-deep .pre-code-header{
  background-color: rgb(39, 39, 39);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  
}
::v-deep .code-block-header__lang{
  /* font-weight: 700; */
  color: #fff;
}
::v-deep .code-block-header__copy{
  /* font-weight: 700; */
  color: #fff;
}
::v-deep .hljs{
  background-color: rgb(0, 0, 0);
}
::v-deep .code-block-header__copy:hover{
  cursor: pointer;
}
</style>
